<template>
  <div ref='editor'></div>
</template>

<script lang='ts' setup>
  import { onMounted, onBeforeUnmount, computed, reactive, unref, ref } from 'vue'
  import { basicProps } from './props'

  import WangEditor from 'wangeditor';

  const editor = ref()
  const content = ref('')
  const props = defineProps({ ...basicProps })
  let instance;

  const onchange = (val) => {
    content.value = val
  }

  function handleProps(instance: any, props: any) {
    const getProps = unref(props)
    Object.keys(getProps).forEach((item) => {
      if(getProps[item]) instance.config[item] = getProps[item]
    })
  }
  
  onMounted(() => {
    // instance即是官网api的editor
    instance = new WangEditor(editor.value)
    instance.config.onchange = onchange
    handleProps(instance, props)

    Object.assign(instance.config, {
      onChange() {
        console.log('change')
      }
    })
    instance.create()
  })

  onBeforeUnmount(() => {
    instance.destroy()
    instance = null
  })

  defineExpose({
    content
  })

</script>

<style>

</style>